$(function () {
    $(".btn-group-vertical button").attr("disabled", "disabled");
    $("#shape li:eq(0)").click(function () {
        $("#show img").toggleClass("img-rounded");
    });
    $("#shape li:eq(1)").click(function () {
        $("#show img").toggleClass("img-circle");
    });
    $("#shape li:eq(2)").click(function () {
        $("#show img").toggleClass("img-thumbnail");
    });
    $("#filter li:eq(0)").click(function () {
        $("#show img").removeClass("blur brightness contrast grayscale huerotate invert opacity saturate sepia shadow");
        $("#show img").addClass("blur");
    });
    $("#filter li:eq(1)").click(function () {
        $("#show img").removeClass("blur brightness contrast grayscale huerotate invert opacity saturate sepia shadow");
        $("#show img").addClass("brightness");
    });
    $("#filter li:eq(2)").click(function () {
        $("#show img").removeClass("blur brightness contrast grayscale huerotate invert opacity saturate sepia shadow");
        $("#show img").addClass("contrast");
    });
    $("#filter li:eq(3)").click(function () {
        $("#show img").removeClass("blur brightness contrast grayscale huerotate invert opacity saturate sepia shadow");
        $("#show img").addClass("grayscale");
    });
    $("#filter li:eq(4)").click(function () {
        $("#show img").removeClass("blur brightness contrast grayscale huerotate invert opacity saturate sepia shadow");
        $("#show img").addClass("huerotate");
    });
    $("#filter li:eq(5)").click(function () {
        $("#show img").removeClass("blur brightness contrast grayscale huerotate invert opacity saturate sepia shadow");
        $("#show img").addClass("invert");
    });
    $("#filter li:eq(6)").click(function () {
        $("#show img").removeClass("blur brightness contrast grayscale huerotate invert opacity saturate sepia shadow");
        $("#show img").addClass("opacity");
    });
    $("#filter li:eq(7)").click(function () {
        $("#show img").removeClass("blur brightness contrast grayscale huerotate invert opacity saturate sepia shadow");
        $("#show img").addClass("saturate");
    });
    $("#filter li:eq(8)").click(function () {
        $("#show img").removeClass("blur brightness contrast grayscale huerotate invert opacity saturate sepia shadow");
        $("#show img").addClass("sepia");
    });
    $("#filter li:eq(9)").click(function () {
        $("#show img").removeClass("blur brightness contrast grayscale huerotate invert opacity saturate sepia shadow");
        $("#show img").addClass("shadow");
    });
    $("#bigImg").click(function () {
        $("#myModal").css("display", "block");
        var imgSrc = $("#show div img").attr("src");
        var imgClass = $("#show div img").attr("class");
        $("#img01").attr("src", imgSrc);
        $("#img01").attr("class",imgClass);
        $("#img01").addClass("modal-content2");
    });
    $("#clearNull li:eq(0)").click(function () {
        $("#show img").removeClass();
    });
    $("#clearNull li:eq(1)").click(function () {
        $("#show").html("<span>这里是图片处理区域</span>");
        $(".btn-group-vertical button").attr("disabled", true);
    });
    $("#output").click(function () {
        alert("尚未开发");
        // var str = $('#show');
        // //console.log(str);
        // html2canvas([str.get(0)], {
        //     onrendered: function (canvas) {
        //         var image = canvas.toDataURL("image/png");
        //         var pHtml = "<img src="+image+" />";
        //         $('#show').html(pHtml);
        //     }
        // });
    });
});